<template>
  <div class="homePage">
    <div class="content">
      <div v-for="item in spuList" :key="item">
        <GoodItem v-if="item.onsale" :good="item" /> 
      </div>
    </div> 
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import GoodItem from "@/components/GoodItem.vue";
import { getSpuApi } from "@/apis/home";

const spuList = ref({});

// 在组件挂载前发送请求获取数据
onMounted(() => {
  getSpuData()
});

const getSpuData = async () => {
  const res = await getSpuApi();
  console.log(res.data)
  spuList.value=res.data.data
};
</script>

<style scoped>
.homePage {
  margin: 0;
  padding: 0;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 80%;

}
</style>